<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的驾照</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="../../plugins/mui/mui.min.css">
    <link rel="stylesheet" href="../../css/sweetalert/sweetalert.css">
    <script src="../../js/statistics.js"></script>
    <style>
        /*title的样式覆盖*/
        .mui-bar{
            background-color:#2a2c33;
            top:0;
        }
        .mui-bar>a{
            color:#fff;
        }
        .mui-title{
            color:#fff;
        }
        body{
            background-color: #ffffff;
        }
        .mui-content{
            background-color: #ffffff;
        }
        /*my style*/
        .img-box{
            display: -webkit-flex;
            display: flex;
            justify-content:center;
            padding:5.3vw 0;
        }
        .img-box>div{
            text-align: center;
        }
        .img-box>div>div{
            width:42.7vw;
            height:32vw;
            border:1px solid #b2b2b2;
            background: url("../../images/my/index/addbg.png") center center no-repeat;
            background-size:12vw 12vw;
        }
        .img-box>div>span{
            display: block;
            margin-top: 4vw;
        }
        .img-box>div:first-child{
            margin-right: 5.3vw;
            font-size: 15px;
        }
        .my-title{
            padding:0 3.2vw;
            line-height: 8vw;
            height:8vw;
            font-size: 16px;
            background-color: #f1f1f1;
            color: #333;
        }
        .my-msg>li>span>b{
            display: inline-block;
            width:2em;
        }
        .my-msg,.my-btn{
            padding:0 3.2vw;
            margin:0;
        }
        .my-msg>li{
            box-sizing: border-box;
            display: -webkit-flex;
            display: flex;
            justify-content: flex-start;
            height:13.2vw;
            align-items: center;
        }
        .my-msg>li>span{
            font-size: 15px;
            color: #333;
        }
        .my-msg>li>input{
            margin-bottom:0;
            padding:0 3.2vw;
            height:7.4vw;
            line-height: 7.4vw;
            width:61vw;
            margin-left:6.9vw;
            font-size: 14px;
            border:1px solid #f1f1f1;
        }
        #toAdd{
            width:100%;
            background: #57B9F3;
            color: #ffffff;
            border: none;
            -webkit-border-radius:5px;
            -moz-border-radius:5px;
            border-radius:5px;
        }
        .my-info{
            padding:17px 0 ;
            margin:0 auto;
            text-align: center;
            font-size: 13px;
        }
        .my-show>li{
            border-bottom: 1px solid #f1f1f1;
        }
        .my-show>li input{
            border:none;
        }

        .my-hide{
            display: none;
        }
    </style>
</head>
<body>
    
    <div class="mui-content">
        <div class="img-box">
            <div>
                <div id="faceImg">
                    <!--<img src="" id='inImage'/>-->
                </div>
                <span>正页</span>
            </div>
            <div>
                <div id="backImg">
                    <!--<img src="" id='backImage'/>-->
                </div>
                <span>副页</span>
            </div>
            <!--<input type="file" class="hide" id="upimg" accept="image/jpg, image/png, image/gif, image/jpeg">-->
        </div>
        <!--<div class="my-title"><span>详细信息</span></div>-->

        <div class="my-title"><span>详细信息</span> <span class="my-edit" style="float: right;color: #999;font-size: 12px">修改信息>></span></div>
        <ul class="my-msg my-show">
            <li>
                <span>姓<b></b>名：</span>
                <input type="text" placeholder="请输入" id="dName">
            </li>
            <li>
                <span>驾驶证号：</span>
                <input type="text" placeholder="请输入" id="num1">
            </li>
            <li>
                <span>档案编号：</span>
                <input type="text" placeholder="请输入" id="num2">
            </li>
        </ul>
        <div class="my-btn my-hide">
            <p class="my-info">修改驾照信息后，您提交的信息需要重新审核</p>
            <button id="toAdd">提交</button>
        </div>
        <div class="info-box">
            <p class="my-info my-hide my-ing">消息审核中，请耐心等待结果</p>
            <p class="my-info my-hide my-pass">消息审核通过</p>
            <p class="my-info my-hide my-out" style="color: #FC7572;">消息审核不通过<br><span class="my-why"></span></p>
        </div>
    </div>
    <script type="text/javascript" src='../../plugins/jquery/jquery-3.1.0.min.js'></script>
    <script src="../../plugins/mui/mui.min.js"></script>
    <script src="../../js/getApiToken.js"></script>
    <script src="../../js/sweetalert/sweetalert.min.js"></script>
    <script src="../../js/md5.js"></script>
    <script type="text/javascript">
        mui.init({});
        mui.plusReady(function(){
            $('input').attr("disabled",true);
            init();
            var nowObj,list,driveId;//当前是哪块上传
            list=['noChange','noChange'];
            function init() {
                myAjax('driver/driver/index', 'post', {
                    'user_id': plus.storage.getItem('cg_user_id'),
                    'user_token': plus.storage.getItem('cg_user_token')
                }, function(data) {
                    if(data.success==true){
                        driveId=data.data.id;
                        console.log(JSON.stringify(data));
                        $('#dName').val(data.data.name);
                        $("#num1").val(data.data.drivernumber);
                        $("#num2").val(data.data.filenumber);
                        //审核中
                        if(data.status==1){
                            $(".my-pass").removeClass("my-hide");
                        }else if(data.status==2){
                            $(".my-out").removeClass("my-hide");
                            $(".my-why").html(data.data.reason);
                            console.log(data.data.reason)
                        }else{
                            $(".my-ing").removeClass("my-hide");
                            $(".my-edit").addClass('my-hide');
                        }
                        //图片加载
                        loadImg('#faceImg',data.data.mainpath);
                        loadImg('#backImg',data.data.backpath);

                        //关闭等待框
                        plus.nativeUI.closeWaiting();
                    }else{
                        //关闭等待框
                        plus.nativeUI.closeWaiting();
                        console.log(JSON.stringify(data));
                    }
                });
                $(".my-title").on("click",'.my-edit',function () {
                    //绑定上传头像事件
                    $('#faceImg').click(function(){
                        nowObj=1;
                        chooseImgFromAlbums();
                        console.log('edit click');
                    });
                    $('#backImg').click(function(){
                        nowObj=2;
                        chooseImgFromAlbums();
                    });
                    console.log('my-eidt is clicked');
                    $(this).addClass('my-hide');
                    $(".info-box>.my-info").addClass('my-hide');
                    $('.my-btn').removeClass('my-hide');
                    $(".my-msg").removeClass('my-show');
                    $('input').attr("disabled",false)
                })
            }

            //显示当前页面
//            mui.currentWebview.show('slide-in-right',200);

            //选择图片后,返回按钮bug
//            back1.addEventListener("tap",function () {plus.webview.currentWebview().close();});

            //上传函数
            toAdd.addEventListener("tap",function () {sub();});
            //相关协议



            //从相册选择
            function chooseImgFromAlbums(){
                plus.gallery.pick(function(file){
                            changeToLocalUrl(file);
                        },
                        function(err) {
                            console.log(JSON.stringify(err));

                        },
                        {
                            filter: 'image',
                            multiple: false
                        });
            }

            //接受到图片 进行处理
            function changeToLocalUrl(path) {
                plus.io.resolveLocalFileSystemURL(path, function(entry) {
                    entry.file( function ( file ) {
                        if(file.size/1024/1024<5){
                            var multiple=1-(file.size/1024/1024/5).toFixed(1);
                            uploadHead(entry.toLocalURL(),multiple);
                            plus.nativeUI.showWaiting();
                        }else{
                            mui.toast('图片大于5M,请重新上传');
                        }
                    }, function ( e ) {
                        alert( e.message );
                    } );


                });
            }
            //把新头像更新到页面
            function uploadHead(imgPath,b) {
                //		            mainImage.src = imgPath;
                var image = new Image();
                image.src = imgPath;
                image.onload = function() {
                    plus.nativeUI.closeWaiting();
                    var imgData = getBase64Image(image,b);
                    if(nowObj==1){
                        $('#faceImg').css({'background-image':'url('+imgData+')','background-size':'100% 100%'});
                        list[0]=imgData;
                    }else{
                        $('#backImg').css({'background-image':'url('+imgData+')','background-size':'100% 100%'});
                        list[1]=imgData;
                    }
                }
            }

            function loadImg(el,src) {
               return $(el).css({'background-image':'url('+_baseUrl+src+')','background-size':'cover'});
            }
            //将图片压缩转成base64
            function getBase64Image(img,b) {
                var canvas = document.createElement("canvas");
                var width = img.width;
                var height = img.height;
                // calculate the width and height, constraining the proportions
                //图片比例一定的取中间
                var x,y,c,z;
                if (width > height) {
                    x=(width-height)/2;
                    y=0;
                    c=height;
                    z=height;
                } else if(width < height){
                    x=0;
                    y=(height-width)/2;
                    c=width;
                    z=width;
                }else{
                    x=0;
                    y=0;
                    c=width;
                    z=height;
                }
                var clipArea = document.getElementById("clipArea");
                canvas.width = width;   /*设置新的图片的宽度*/
                canvas.height = height; /*设置新的图片的长度*/
                var ctx = canvas.getContext("2d");
                ctx.drawImage(img,0,0,width,height); /*绘图*/
                var dataURL = canvas.toDataURL("image/jpeg",.5);
                return dataURL;
            }

            //确认上传函数
            function sub(){
                if(dName.value.trim()==''){
                    mui.toast('姓名不能为空');
                }else if(num1.value.trim()=='') {
                    mui.toast('驾驶证号不能为空');
                }else if(num2.value.trim()==''){
                    mui.toast('档案编号不能为空');
                }else if(!list[0]){
                    mui.toast('请上传驾驶证照（正页）');
               }else if(!list[1]){
                    mui.toast('请上传驾驶证照（副页）');
                }else{
                    var sendData={
                        'user_id': plus.storage.getItem('cg_user_id'),
                        'user_token': plus.storage.getItem('cg_user_token'),
                        'name':dName.value.trim(),
                        'drivernumber':num1.value.trim(),
                        'filenumber':num2.value.trim(),
                        'mainpath':list[0]=="noChange"?"noChange":list[0].substring(23),
                        'backpath':list[1]=="noChange"?"noChange":list[1].substring(23),
                        'id':driveId
                    };
                    console.log(JSON.stringify(sendData));
                    plus.nativeUI.showWaiting('上传中...');
                    myAjax('driver/driver/change', 'post',sendData, function(data) {
                    	console.log(JSON.stringify(data));
                        plus.nativeUI.closeWaiting();
                        if (data.success==true){
                            swal({
                                        title: "上传成功",
                                        text: "请等待审核结果！",
                                        type: "success",
                                        confirmButtonColor: "#57B9F3",
                                        confirmButtonText: "确认",
                                        closeOnConfirm: false,
                                    showCancelButton: false,

                            },function () {
                                location.reload();
                            })
                        }else{
                            swal({
                                title: "上传失败",
                                text: data.error_msg,
                                type: "error",
                                confirmButtonColor: "#57B9F3",
                                confirmButtonText: "确认",
                                closeOnConfirm: false
                            })
                        }
                        console.log('close')
//                        if(data.success){
//                            mui.toast('上传成功');
//                            plus.webview.currentWebview().close();
//                        }else{
//                            mui.toast(data.error_msg);
//                        }
                    })
                }
            }
        });
    </script>
</body> 
</html> 